<template>
    <div id="myLeftNav">
        <ul>
            <router-link v-for="item in navData" :to="item.path"  :key="item.id">
                <li @click="changeStyle(item.id)" :class="{'active':changeNum === item.id}">
                    {{item.name}}
                </li>
            </router-link>
        </ul>
    </div>
</template>

<script>
export default {
    name:'ZuoNav',
    data() {
        return {
            navData:[
                {id:1,path:'/home/stuMan',name:'学生管理'},
                {id:2,path:'/home/classMan',name:'班级管理'},
                {id:3,path:'/home/techMan',name:'教师管理'}
            ],
            changeNum:1,
        }
    },
    methods: {
        changeStyle(num){
            this.changeNum = num
        }
    },  
}
</script>

<style lang="less" scoped>
    #myLeftNav{
        width: 15%;
        height: 800px;
        float: left;
        background-color: deepskyblue;
        padding: 50px 0;
        margin: 20px 0;
        ul{
            padding: 0;
            li{
                list-style: none;
                height: 60px;
                line-height: 60px;
                text-align: center;
                color: white;
                cursor: pointer;
                background-color: purple;
            }
        }
        a{
            text-decoration: none;
        }
        .active{
            background-color: deeppink;
            font-size: 20px;
            font-weight: bold;
        }
        
    }
</style>